<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main'));

        option = {
            // 1.标题
            title: {
                text: '2021全学科薪资走势',
                top: 15,
                left: 10,
                textStyle: {
                    color: '#6d767e',
                    fontSize: 16
                }
            },
            // 2.鼠标移入提示
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%']
                }
            },
            // 3.x轴数据: 必须
            xAxis: {
                type: 'category', // 类别
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                ]
            },
            // 4.y轴数据：必须
            yAxis: {
                type: 'value',
                boundaryGap: [0, '50%'] // Y轴留白，会影响最大值，最小值
            },
            // 5.线条样式
            series: [
                {
                    type: 'line',
                    smooth: true, //设置折线圆角
                    symbolSize: 10, // 小圆圈大小
                    data: [820, 932, 901, 934, 1290, 1330],
                    //线条颜色
                    lineStyle: {
                        width: 6,
                        color: '#4281ef'
                    },
                    //内容区域颜色
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, color: '#499FEE' // 0% 处的颜色
                            }, {
                                offset: 0.8, color: 'rgba(255, 255, 255, 0.2)' // 80% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                            }
                        ])
                    },
                }
            ]
        }

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>